import React, { useState } from 'react';
import {
  IonFooter,
  IonToolbar,
  IonInput,
  IonButton,
  IonIcon,
} from '@ionic/react';
import { camera, mic, send } from 'ionicons/icons';

interface TranslationInputProps {
  onTranslate: (text: string) => void;
}

const TranslationInput: React.FC<TranslationInputProps> = ({ onTranslate }) => {
  const [text, setText] = useState('');

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (text.trim()) {
      onTranslate(text);
      setText('');
    }
  };

  return (
    <IonFooter>
      <IonToolbar>
        <form onSubmit={handleSubmit} className="ion-padding-horizontal">
          <div className="flex-input-container">
            <IonButton fill="clear">
              <IonIcon icon={camera} />
            </IonButton>
            
            <IonInput
              value={text}
              onIonInput={e => setText(e.detail.value || '')}
              placeholder="输入要翻译的文字"
              className="translation-input"
            />
            
            <IonButton fill="clear">
              <IonIcon icon={mic} />
            </IonButton>
            
            <IonButton type="submit" fill="clear" disabled={!text.trim()}>
              <IonIcon icon={send} />
            </IonButton>
          </div>
        </form>
      </IonToolbar>
    </IonFooter>
  );
};

export default TranslationInput;